<template>
    <div class="page-demo-account-role-power">
        <div class="left">
            <a-menu
                mode="inline"
                theme="light"
                @click="handleMenu"
            >
                <template v-for="menu in list_menus" >
                    <!-- 独立菜单[顶级] start -->
                    <a-menu-item :key="menu.id" v-if="!menu.children" :value="menu">
                        <a-icon v-if="menu.icon" :type="menu.icon" />
                        <span>{{ menu.name }}</span>
                    </a-menu-item>
                    <!-- 独立菜单[顶级] end -->

                    <!-- 菜单组[顶级] start -->
                    <a-sub-menu :key="menu.id" v-else>
                        <span slot="title">
                            <a-icon v-if="menu.icon" :type="menu.icon" />
                            <span>{{ menu.name }}</span>
                        </span>

                        <template v-for="sec_menu in menu.children" >
                            <!-- 独立菜单[二级] start -->
                            <a-menu-item :key="sec_menu.id" v-if="!sec_menu.children" :value="sec_menu">
                                <a-icon v-if="sec_menu.icon" :type="sec_menu.icon" />
                                <span>{{ sec_menu.name }}</span>
                            </a-menu-item>
                            <!-- 独立菜单[二级] end -->

                            <!-- 菜单组[二级] start -->
                            <a-sub-menu :key="sec_menu.id" v-else>
                                <span slot="title">
                                    <a-icon v-if="sec_menu.icon" :type="sec_menu.icon" />
                                    <span>{{ sec_menu.name }}</span>
                                </span>
                                <!--  三级菜单 start  -->
                                <a-menu-item :key="thr_menu.id" v-for="thr_menu in sec_menu.children" :value="thr_menu">
                                    <a-icon v-if="thr_menu.icon" :type="thr_menu.icon" />
                                    <span>{{ thr_menu.name }}</span>
                                </a-menu-item>
                                <!--  三级菜单 end  -->
                            </a-sub-menu>
                            <!-- 菜单组[二级] end -->
                        </template>
                    </a-sub-menu>
                    <!-- 菜单组[顶级] end -->
                </template>
            
            </a-menu>
        </div>
        <div class="right" :loading="true">
            <a-spin :spinning="loading_oplist" active>
                <a-checkbox-group style="width:100%;" @change="onChange">
                    <a-row :gutter="[24,24]">
                        <a-col :span="4">
                            <a-checkbox value="EDIT">编辑</a-checkbox>
                        </a-col>
                        <a-col :span="4">
                            <a-checkbox value="DEL">删除</a-checkbox>
                        </a-col>
                        <a-col :span="4">
                            <a-checkbox value="DEL">删除</a-checkbox>
                        </a-col>
                        <a-col :span="4">
                            <a-checkbox value="DEL">删除</a-checkbox>
                        </a-col>
                        <a-col :span="4">
                            <a-checkbox value="DEL">删除</a-checkbox>
                        </a-col>
                        <a-col :span="4">
                            <a-checkbox value="DEL">删除</a-checkbox>
                        </a-col>
                        <a-col :span="4">
                            <a-checkbox value="DEL">删除</a-checkbox>
                        </a-col>
                        <a-col :span="4">
                            <a-checkbox value="DEL">删除</a-checkbox>
                        </a-col>
                        <a-col :span="4">
                            <a-checkbox value="DEL">删除</a-checkbox>
                        </a-col>
                    </a-row>
                </a-checkbox-group>
            </a-spin>
        </div>
    </div>
</template>

<script>
const treeData = [
    {
        title: '0-0',
        key: '0-0',
        children: [
        {
            title: '0-0-0',
            key: '0-0-0',
            children: [
                { title: '0-0-0-0', key: '0-0-0-0' },
                { title: '0-0-0-1', key: '0-0-0-1' },
                { title: '0-0-0-2', key: '0-0-0-2' },
            ],
        },
        {
            title: '0-0-2',
            key: '0-0-2',
        },
        ],
    },
    {
        title: '0-1',
        key: '0-1',
        children: [
            { title: '0-1-0-0', key: '0-1-0-0' },
            { title: '0-1-0-1', key: '0-1-0-1' },
            { title: '0-1-0-2', key: '0-1-0-2' },
        ],
    },
    {
        title: '0-2',
        key: '0-2',
    },
];

export default {
    data() {
        return {
            "list_menus":[],

            "loading_oplist" : false,
        };
    },
    watch: {
        checkedKeys(val) {
            console.log('onCheck', val);
        },
    },
    created(){
        this.list_menus = this.$bus.list_menus;
    },
    methods: {
        // 点击菜单
        handleMenu(item, key, keyPath){
            var data = item.item.value;
            console.log(data);
            this.loading_oplist = true;
            setTimeout(()=>{
                this.loading_oplist = false;
            },1500);
        },
        onChange(checkedValues) {
            console.log('checked = ', checkedValues);
        },
        onCheck(checkedKeys) {
            console.log('onCheck', checkedKeys);
            this.checkedKeys = checkedKeys;
        },
    },
};
</script>

<style lang="less" scoped>
.page-demo-account-role-power{
    // display: inline-flex;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.06);
    padding: 20px 10px;
    height: 100%;
    > .left,> .right{
        display: inline-block;
        vertical-align: top;
        // height: 300px;
        box-sizing: border-box;
    }
    > .left{
        width: 300px;
        border-right: 1px solid rgba(0,0,0,0.08);
        .ant-menu{
            border:0px;
            overflow-x: hidden;
        }
    }
    > .right{
        width: calc(100% - 300px);
        padding: 0px 20px;
    }
}
</style>